.content-n-side:before,
.content-only:before,
.page-width:before,
.post-preview:before,
.content-n-side:after,
.content-only:after,
.page-width:after,
.post-preview:after {
  content: " ";
  display: table
}

.content-n-side:after,
.content-only:after,
.page-width:after,
.post-preview:after {
  clear: both
}

/* vietnamese */

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(https://fonts.gstatic.com/s/inconsolata/v15/BjAYBlHtW3CJxDcjzrnZCL6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(https://fonts.gstatic.com/s/inconsolata/v15/BjAYBlHtW3CJxDcjzrnZCCYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(https://fonts.gstatic.com/s/inconsolata/v15/BjAYBlHtW3CJxDcjzrnZCI4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


/* cyrillic-ext */

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v8/5hX15RUpPERmeybVlLQEWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}


/* cyrillic */

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v8/fU0HAfLiPHGlZhZpY6M7dBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* latin-ext */

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v8/CPRt--GVMETgA6YEaoGitxTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v8/I-OtoJZa3TeyH6D9oli3ifesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

html {
  overflow-y: scroll;
  background: #f1f1f1;
  font-size: 15px;
  font-family: sans-serif;
  line-height: 1.9
}

@media screen and (min-width: 530px) {
  html {
    font-size: 16px;
    color: #444
  }
}

body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%
}

figure {
  margin: 0
}

img {
  max-width: 100%
}

p {
  margin: 1.2em 0
}

a:link,
a:visited {
  text-decoration: none;
  color: #CC2100
}

a:active,
a:hover,
a:focus {
  color: #FF8F00
}

a:active {
  text-decoration: underline
}

svg {
  overflow: hidden
}

.container {
  max-width: 1066px;
  background: #fff;
  margin: 0 auto
}

.content-n-side,
.content-only,
.page-width {
  position: relative;
  top: -31px;
  padding: 0 20px
}

@media screen and (min-width: 530px) {
  .content-n-side,
  .content-only,
  .page-width {
    padding: 0 64px 0 32px
  }
}

@media screen and (min-width: 800px) {
  .content-n-side,
  .content-only,
  .page-width {
    padding: 0 32px
  }
}

.content-n-side>.side {
  display: none;
}

@media screen and (min-width: 800px) {
  .content-n-side>.content {
    width: 75%;
    padding-right: 73px;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }
  .content-n-side>.side {
    width: 25%;
    float: right;
    display: block;
  }
  .site-header a.who {
    display: none;
  }
}

.page-width {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1066px;
  margin: 0 auto
}

@media screen and (min-width: 800px) {
  .content-only>.content {
    width: 68%
  }
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #e6e6e6));
  background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
  background-image: -o-linear-gradient(top, #fff, #e6e6e6);
  background-image: linear-gradient(to bottom, #fff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
}

.btn:hover {
  background-position: 0 -15px;
  background-color: #e6e6e6;
  -webkit-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear
}

.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px
}

.btn:active {
  background-image: none;
  outline: 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05)
}

.btn-danger {
  color: #FFF;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #DA4F49;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EE5F5B), color-stop(1, #BD362F));
  background-image: -moz-linear-gradient(top, #EE5F5B, #BD362F);
  background-image: -o-linear-gradient(top, #EE5F5B, #BD362F);
  background-image: linear-gradient(to bottom, #EE5F5B, #BD362F);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
  color: #FFF;
  background-color: #BD362F
}

.site-header {
  background: #2D2D2D;
  overflow: hidden
}

.site-header>.inner {
  padding-top: 75px;
  padding-left: 0
}

@media screen and (min-width: 530px) {
  .site-header>.inner {
    padding-top: 135px
  }
}

.site-header a:link,
.site-header a:visited {
  color: #fff
}

.site-header a:hover,
.site-header a:active {
  color: #fff;
  text-decoration: underline
}

.site-header .title,
.site-header .who {
  background: #009D81;
  line-height: 1;
  font-family: "PT Serif", georgia, serif;
  display: inline-block;
  font-size: 1.05rem;
  padding: 10px 45px 10px 20px
}

@media screen and (min-width: 530px) {
  .site-header .title,
  .site-header .who {
    padding: 10px 97px 10px 32px
  }
}

@media screen and (min-width: 1066px) {
  .site-header .title,
  .site-header .who {
    border-radius: 7px 7px 0 0
  }
}

.site-header .who {
  float: right;
  padding: 10px 0;
  background: none;
  margin-right: 0
}

@media screen and (min-width: 530px) {
  .site-header .who {
    margin-right: -32px
  }
}

@media screen and (min-width: 800px) {
  .site-header .who {
    position: absolute;
    right: 25%;
    padding-right: 90px
  }
  .js .site-header .who {
    display: none
  }
}

.h-1,
.article-content h1,
.who-page>h1 {
  background: #FF8400;
  color: #FFF;
  margin: 0;
  font-family: "PT Serif", georgia, serif;
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 1.1;
  margin-left: -20px;
  padding: 7px 20px 13px 20px
}

@media screen and (min-width: 530px) {
  .h-1,
  .article-content h1,
  .who-page>h1 {
    font-size: 3.4rem;
    padding: 10px 36px 17px 62px;
    margin-left: -65px;
    margin-right: -32px
  }
}

@media screen and (min-width: 1066px) {
  .h-1,
  .article-content h1,
  .who-page>h1 {
    border-radius: 32px 0 0 32px
  }
}

.h-2,
.article-content h2,
.who-page>section>h1 {
  background: #009D81;
  color: #FFF;
  margin: 35px 0 0;
  font-family: "PT Serif", georgia, serif;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1;
  padding: 7px 20px 10px 20px;
  margin-left: -20px
}

@media screen and (min-width: 530px) {
  .h-2,
  .article-content h2,
  .who-page>section>h1 {
    font-size: 1.9rem;
    padding: 10px 35px 13px 62px;
    margin-right: -32px;
    margin-left: -65px
  }
}

@media screen and (min-width: 1066px) {
  .h-2,
  .article-content h2,
  .who-page>section>h1 {
    border-radius: 32px 0 0 32px
  }
}

.h-3,
.article-content h3 {
  margin: 27px 0 0;
  line-height: 1;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1rem;
  border-left: 14px solid #FF8400;
  padding-left: 8px
}

@media screen and (min-width: 530px) {
  .h-3,
  .article-content h3 {
    font-size: 1.2rem;
    border-left: 19px solid #FF8400;
    padding-left: 12px
  }
}

.h-4,
.side>section>h1 {
  font-weight: normal;
  font-size: 0.9rem;
  border-bottom: 1px dotted #CCC;
  padding-bottom: 3px;
  margin: 1.4em 0 0;
  line-height: 1
}

.article-date {
  font-size: 0.8rem;
  display: block;
  background: #FFE454;
  color: #000;
  padding: 6px 20px 5px 20px;
  margin: 0 0 0 -20px
}

@media screen and (min-width: 530px) {
  .article-date {
    padding: 6px 10px 5px 32px;
    margin-left: -32px;
    margin-right: -32px
  }
}

.article-content code {
  font-family: Inconsolata, courier, monospace;
  background: #EEE;
  padding: 3px 3px;
  margin: 0 2px;
  outline: 1px solid #E2E2E2;
  line-height: 1;
  white-space: normal;
  display: inline-block
}

.full-figure {
  margin: 1em -20px;
  overflow: hidden;
  background: #eee
}

@media screen and (min-width: 530px) {
  .full-figure {
    margin-left: 0;
    margin-right: 0
  }
}

.full-figure.checked {
  background: url("/static/css/imgs/check.png")
}

.full-figure.blueprint {
  background: url("/static/css/imgs/graph-tile.png"), radial-gradient(circle farthest-corner, #08d, #002b46) center;
  background-size: 12%, cover
}

.full-figure img,
.full-figure iframe,
.full-figure video,
.full-figure object {
  display: block;
  margin: 0 auto
}

.full-figure .video {
  position: relative;
  padding-top: 56.25%
}

.full-figure .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.full-figure>figcaption {
  font-size: 0.8rem;
  line-height: 1.4;
  background: #FFE454;
  color: #000;
  padding: 6px 20px
}

@media screen and (min-width: 530px) {
  .full-figure>figcaption {
    padding: 6px 10px
  }
}

.side {
  font-size: 0.85rem;
  font-weight: normal
}

.side .icon-list {
  margin: 1em 0;
  display: flex;
  flex-flow: row wrap
}

.side .icon-list>li {
  flex: 0 0 50%
}

.my-big-face {
  margin-top: 10px
}

.my-big-face h1 {
  position: relative;
  margin: 0;
  padding: 76.27907% 0 0 0;
  outline: 10px solid #fff;
  background: #fff
}

.my-big-face img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.codehilite {
  background: #2D2D2D;
  color: #E4E4E4;
  margin: 1em -20px;
  padding: 16px 20px;
  line-height: 1.4;
  font-size: 1rem;
  overflow: auto
}

@media screen and (min-width: 530px) {
  .codehilite {
    margin-left: -32px;
    margin-right: 0;
    padding-left: 32px;
    padding-right: 0;
    font-size: 1.1rem
  }
}

.codehilite pre {
  font-family: Inconsolata, courier, monospace;
  margin: 0;
  display: inline-block;
  padding-right: 16px
}

.hljs-comment,
.hljs-quote {
  color: #bc9458;
  font-style: italic
}

.hljs-keyword,
.hljs-selector-tag {
  color: #c26230
}

.hljs-string,
.hljs-number,
.hljs-regexp,
.hljs-variable,
.hljs-template-variable {
  color: #a5c261
}

.hljs-subst {
  color: #519f50
}

.hljs-tag,
.hljs-name {
  color: #e8bf6a
}

.hljs-type {
  color: #da4939
}

.hljs-symbol,
.hljs-bullet,
.hljs-built_in,
.hljs-builtin-name,
.hljs-attr,
.hljs-link {
  color: #6d9cbe
}

.hljs-params {
  color: #d0d0ff
}

.hljs-attribute {
  color: #cda869
}

.hljs-meta {
  color: #9b859d
}

.hljs-title,
.hljs-section {
  color: #ffc66d
}

.hljs-addition {
  background-color: #144212;
  color: #e6e1dc;
  display: inline-block;
  width: 100%
}

.hljs-deletion {
  background-color: #600;
  color: #e6e1dc;
  display: inline-block;
  width: 100%
}

.hljs-selector-class {
  color: #9b703f
}

.hljs-selector-id {
  color: #8b98ab
}

.hljs-emphasis {
  font-style: italic
}

.hljs-strong {
  font-weight: bold
}

.hljs-link {
  text-decoration: underline
}

.i {
  display: inline-block;
  vertical-align: middle
}

.i-social {
  width: 16px;
  height: 16px;
  background: url("/static/css/imgs/social-icons.png") no-repeat;
  background-size: 106px
}

.i-social.flickr {
  background-position: 0 0
}

.i-social.lanyrd {
  background-position: -18px 0
}

.i-social.github {
  background-position: -36px 0
}

.i-social.twitter {
  background-position: -54px 0
}

.i-social.gplus {
  background-position: -72px 0
}

.i-social.rss {
  background-position: -90px 0
}

.icon-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.icon-list>li {
  margin: 0 0 0.3em
}

.icon-list .i {
  margin-right: 4px
}

.link-list a {
  display: block
}

.comments {
  margin-top: 50px
}

.post-preview h1 {
  margin-top: 0
}

.post-preview h1 a:link,
.post-preview h1 a:visited {
  display: block;
  color: #fff
}

.post-preview h1 a:hover,
.post-preview h1 a:active {
  color: #fff;
  text-decoration: underline
}

.post-preview .preview-image {
  margin: 20px 0 0
}

@media screen and (min-width: 530px) {
  .post-preview .preview-image {
    float: left;
    width: 200px;
    margin: 5px 20px 20px 0
  }
}

.post-preview .preview-image-sizer {
  position: relative
}

.post-preview .preview-image-sizer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.pagination {
  overflow: hidden;
  margin: 2.1em 0;
  padding: 0
}

.pagination li {
  display: inline
}

.pagination a:link,
.pagination a:visited,
.pagination .page,
.pagination .next,
.pagination .prev,
.pagination .gap {
  float: left;
  padding: 0 8px;
  font-weight: bold;
  border-right: 1px dotted #a5a5a5
}

.pagination .current,
.pagination .disabled,
.pagination .gap {
  color: #6e6e6e;
  font-weight: normal
}

.pagination .prev,
.pagination a.prev:link,
.pagination a.prev:visited {
  padding-left: 0
}

.pagination .next,
.pagination a.next:link,
.pagination a.next:visited {
  border: none
}

.form-rows {
  margin: 1em -20px
}

.codehilite+.form-rows {
  margin-top: -1.1em
}

@media screen and (min-width: 530px) {
  .form-rows {
    margin-left: -32px;
    margin-right: 0
  }
}

.form-rows .field {
  display: table-row
}

.form-rows .field:nth-child(even) .label {
  background: #3CB39D
}

.form-rows .field:nth-child(even) .input {
  background: #f7f7f7
}

.form-rows .label {
  background: #009D81;
  color: #fff;
  vertical-align: middle;
  display: table-cell;
  width: 1px;
  white-space: nowrap;
  padding: 0.5em;
  padding-left: 20px
}

@media screen and (min-width: 530px) {
  .form-rows .label {
    padding-left: 32px
  }
}

.form-rows .input {
  background: #ECECEC;
  padding: 0 0.5em;
  vertical-align: middle;
  display: table-cell
}

.form-rows input[type=text],
.form-rows input[type=range] {
  width: 100%;
  margin: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.form-rows-inner {
  display: table;
  width: 100%
}

.quote {
  margin: 0;
  border-left: 10px solid #D5D5D5;
  padding-left: 16px
}

.quote>p:last-of-type {
  margin-bottom: 0
}

.warning {
  background: #BF0000;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 6px 20px 5px 20px;
  margin: 0 0 0 -20px
}

@media screen and (min-width: 530px) {
  .warning {
    padding: 6px 10px 5px 32px;
    margin-left: -32px;
    margin-right: -32px
  }
}

.warning>:first-child {
  margin-top: 0
}

.warning>:last-child {
  margin-bottom: 0
}

.who-page figure img {
  display: block;
  margin: 0 auto
}

.who-page .icon-list {
  -webkit-columns: 100px;
  -moz-columns: 100px;
  columns: 100px;
  margin: 16px 0
}

.blog-index .post-preview.first .h-2 {
  background: #FF8400
}